<template>
  <div class="page-modal">
    <el-dialog v-model="dialogVisible" title="Warning" width="30%" center v-bind="elDialogConfig">
      <div>
        <xForm :colLayout="colLayout" :formItemStyle="formItemStyle" :searchData="editData" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, PropType, defineExpose } from "vue"

import xForm from "@/components/screen"

import type { IFormColLayout } from "@/components/screen"
import type { elDialogConfig } from "../types"
const props = defineProps({
  elDialogConfig: {
    type: Object as PropType<elDialogConfig>,
    default() {
      return {
        width: "35%",
        center: true,
        top: "30vh"
      }
    }
  }
})
const dialogVisible = ref(false)
const colLayout: IFormColLayout = {
  span: 24
}
const editData = ref({})
const formItemStyle = {}
defineExpose({
  dialogVisible,
  editData
})
// console.log(props.elDialogConfig)
</script>

<style scoped>
</style>
